<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button type="default" @click="handleCancel">{{ $t('关闭') }}</a-button>
    </template>
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-row :gutter="24" align="middle" type="flex">
        <a-col :span="24">
          <div style="color: orange">{{ $t('说明：请逐条设置该会员的权益，设置后将在小程序等级权益中展示。') }}</div>
        </a-col>
        <a-col :span="24">
          <a-form-model-item :label="$t('权益说明')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
            <div v-for="(item, index) in equityList" :key="index">
              <a-input v-model="item.equity" style="width: 340px; margin: 0 5px" :disabled="item.disabled"></a-input>
              <a-icon
                v-if="item.disabled && !disableSubmit"
                @click="editEquity(item)"
                type="edit"
                style="color: #1890ff; cursor: pointer; margin-left: 5px"
              />
              <a-icon
                v-if="!item.disabled && !disableSubmit"
                type="check"
                @click="saveEquity(item)"
                style="color: #1890ff; cursor: pointer; margin-left: 5px"
              />
              <a-icon
                type="close"
                v-if="!disableSubmit"
                @click="delEquity(item, index)"
                style="color: #1890ff; cursor: pointer; margin-left: 5px"
              />
              <a-icon
                type="plus"
                v-if="index == equityList.length - 1 && !disableSubmit"
                @click="addEquity"
                style="color: #1890ff; cursor: pointer; margin-left: 5px"
              />
            </div>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>
<script>
import { getAction, httpAction, deleteAction } from '@/api/manage'
export default {
  name: 'EquityModal',
  data() {
    return {
      title: this.$t('权益说明'),
      width: 600,
      visible: false,
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      model: {},
      validatorRules: {},
      url: {
        list: '/member/bisMemberRuleEquity/list',
        add: '/member/bisMemberRuleEquity/add',
        edit: '/member/bisMemberRuleEquity/edit',
        delete: '/member/bisMemberRuleEquity/delete',
      },
      equityList: [],
    }
  },
  methods: {
    edit(record) {
      let that = this
      that.confirmLoading = false
      that.model = Object.assign({}, record)
      that.equityList = [
        {
          memberTypeId: that.model.id,
          equity: '',
          disabled: that.disableSubmit,
        },
      ]
      that.getEquip()
      that.visible = true
    },
    getEquip() {
      let that = this
      getAction(that.url.list, { memberTypeId: that.model.id, pageSize: 1000 }).then((res) => {
        if (res.success) {
          res.result.records.forEach((rds) => {
            rds.disabled = true
          })
          that.equityList = res.result.records
          if (!that.disableSubmit) {
            that.equityList.push({
              memberTypeId: that.model.id,
              equity: '',
              disabled: that.disableSubmit,
            })
          }
        } else {
          that.$message.error(res.message)
          if (!that.disableSubmit) {
            that.equityList.push({
              memberTypeId: that.model.id,
              equity: '',
              disabled: that.disableSubmit,
            })
          }
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    editEquity(item) {
      this.$set(item, 'disabled', false)
    },
    saveEquity(item) {
      let that = this
      if (!item.equity) {
        that.$message.warning(that.$t('当前权益不能为空'))
        return
      }
      let httpurl = ''
      let method = ''
      if (!item.id) {
        httpurl += that.url.add
        method = 'post'
      } else {
        httpurl += that.url.edit
        method = 'put'
      }
      let query = Object.assign({}, item)
      httpAction(httpurl, query, method).then((res) => {
        if (res.success) {
          that.$set(item, 'disabled', true)
          that.getEquip()
          that.$message.success(res.message)
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    addEquity() {
      let obj = {}
      obj.equity = ''
      obj.disabled = false
      this.equityList.push(obj)
    },
    delEquity(item, index) {
      let that = this
      if (item.id) {
        deleteAction(that.url.delete, { id: item.id }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.getEquip()
          } else {
            that.$message.warning(res.message)
          }
        })
      } else if (that.equityList.length - 1 > index) {
        that.equityList.splice(index, 1)
      }
    },
  },
}
</script>

<style>
</style>